<template>
  <div class="card" style="padding: 5px">
    <el-button type="primary" @click="addBlog">发表新博客</el-button>
    <div style="height: 700px">
      <!-- 帖子数据Table -->
      <el-table :data="tableData" stripe style="width: 100%" height="90%" >
        <el-table-column prop="ttitle" label="标题名"> </el-table-column>
        <el-table-column prop="tcontent" label="内容"
                         class-name="max-width-tooltip-column"
                         show-overflow-tooltip > </el-table-column>
        <el-table-column prop="treleaseDate" label="发布日期"></el-table-column>
        <!-- 自定义列 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="$router.push('blog/' + scope.row.tid)"
                title="查看"
            >查看</el-button
            >
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                title="删除"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pager">
        <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="pageData.limit"
            :current-page="pageData.page"
            @current-change="currentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{

      tableData: [],
      operateType: "add",
      isShow: false,
      opertateFormLabel: [
        {
          model: "tname",
          label: "帖子标题",
          type: "input",
        },
        {
          model: "uid",
          label: "发帖人id",
          type: "input",
        },
        {
          model: "text",
          label: "内容",
          type: "input",
        },
      ],
      operateForm: {
        tname: "",
        uid: "",
        text: "",
      },
      formLabel: [
        {
          model: "keyword",
          label: "",
          type: "input",
        },
      ],
      formLabel2: [
        {
          model: "keyword",
          label: "",
          type: "delete",
        },
      ],
      searchFrom1: {
        keyword: "",
      },
      searchFrom2: {
        keyword: "",
      },
      searchFrom3: {
        keyword: "",
      },
      pageData: {
        page: 1,
        limit: 5,
      },
      total: 0,
    }
  },
  methods:{
    addBlog(){
      this.$router.push({ name: 'NewBlog' })
    },
    getData() {
      let url = `/api/user/user-post`;

      this.$http
          .get(url, { headers: { token: this.token } })
          .then((response) => {
            if (response.data.code === 20000) {
              let fetchedData = response.data.data;
              this.tableData = fetchedData;
              if (!Array.isArray(fetchedData)) {
                fetchedData = [fetchedData];
              }
            } else {
              if (response.data.code === 40100) {
                this.$router.push("/login");
              }
              this.$message.error(response.data.msg);
            }
          })
          .catch((error) => {
            this.$message.error("获取帖子列表失败：" + error.message);
          });
    },
    currentChange(val) {
      this.pageData.page = val;
      this.getData();
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$router.push("/login");
    } else {
      this.getData();
    }
  },
}
</script>

<style lang="less" scoped>
.manage {
  height: 100%;

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .common-table {
    height: 90%;
    position: relative;

    .pager {
      position: absolute;
      right: 20px;
      bottom: 0;
    }
  }
}
</style>

